﻿@inherits PmComponentBase

<SSimpleModal Value="_projectFormModel.Visible" ValueChanged="ProjectModalValueChanged" Title="@(_projectFormModel.HasValue ? $"{T("Edit Project")}":$"{T("Add Project")}")" Width="770">
    <MForm @ref="_form" Class="full-height" Context="formContext" EnableValidation Model="_projectFormModel.Data">
        <div class="d-flex flex-column" style="width:100%; height:100%; overflow: hidden;">
            <div class="full-height pr-5" style="overflow: auto;">
                <STextField Class="mt-1" Outlined Label="@T("Name")" @bind-Value="_projectFormModel.Data.Name"></STextField>
                <SAutoComplete @bind-Value="_projectFormModel.Data.TeamIds"
                               Disabled="DisableTeamSelect"
                               Items="_allTeams"
                               Chips
                               Class="mt-9"
                               Outlined
                               Multiple
                               Label="@T("Team")"
                               ItemText="r=>r.Name"
                               ItemValue="r=>r.Id">
                    <SelectionContent Context="data">
                        <MChip Close
                               Disabled="DisableTeamSelect"
                               OnCloseClick="()=>_projectFormModel.Data.TeamIds.Remove(data.Item.Id)">
                            <MAvatar Left>
                                <MImage Src="@data.Item.Avatar"></MImage>
                            </MAvatar>
                            @data.Item.Name
                        </MChip>
                    </SelectionContent>
                    <ItemContent Context="data">
                        <MListItemAvatar>
                            <img src="@data.Item.Avatar">
                        </MListItemAvatar>
                        <MListItemContent>
                            <MListItemTitle>
                                @((MarkupString)data.Item.Name)
                            </MListItemTitle>
                        </MListItemContent>
                    </ItemContent>
                </SAutoComplete>
                <STextField Class="mt-9" Disabled="@(_projectFormModel.HasValue)" Outlined Label="ID" @bind-Value="_projectFormModel.Data.Identity"></STextField>
                <SSelect @bind-Value="_projectFormModel.Data.LabelCode"
                         Items="_projectTypes"
                         ItemText="r=>r.Name"
                         ItemValue="r=>r.Code"
                         Outlined
                         Class="mt-9"
                         MenuProps="p=>{p.OffsetY = true;}"
                         Label="@T("Type")">
                </SSelect>
                <SSelect @bind-Value="_projectFormModel.Data.EnvironmentClusterIds" Chips Multiple Outlined
                         Items="_allEnvClusters"
                         Class="mt-9"
                         ItemText="r=>r.EnvironmentClusterName"
                         ItemValue="r=>r.Id"
                         ItemDisabled="@(r=>_disableEnvironmentClusterIds.Contains(r.Id))"
                         Label="@T("Environment/Cluster")">
                    <SelectionContent Context="context">
                        <EnvClusterChip EnvironmentName="@context.Item.EnvironmentName"
                                        EnvironmentColor="@context.Item.EnvironmentColor"
                                        ClusterName="@context.Item.ClusterName"
                                        Close="@(!_disableEnvironmentClusterIds.Contains(context.Item.Id))"
                                        OnCloseClick="()=>_projectFormModel.Data.EnvironmentClusterIds.RemoveAll(id=>id==context.Item.Id)" />
                    </SelectionContent>
                    <ItemContent>
                        <MListItemContent>
                            <div class="d-flex align-center">
                                <div style="@($"color: {context.Item.EnvironmentColor} !important")">@context.Item.EnvironmentName</div>/<div>@context.Item.ClusterName</div>
                            </div>
                        </MListItemContent>
                    </ItemContent>
                </SSelect>
                <MTextarea NoResize Class="mt-9" Height="121" Outlined Label="@T("Description")" @bind-Value="_projectFormModel.Data.Description"></MTextarea>
                @if (_projectFormModel.HasValue)
                {
                    <MRow Class="mt-2">
                        <MCol Cols=6 Class="light-blue-color">@T("Creator"): @_projectDetail.CreatorName</MCol>
                        <MCol Class="d-flex justify-end translucency-blue-color" Cols=6>
                            @T("CreationTime"):&nbsp;
                            <DateTimeZone Value="_projectDetail.CreationTime" />
                        </MCol>
                    </MRow>
                    <MRow Class="mt-6">
                        <MCol Cols=6 Class="light-blue-color">@T("Modifier"): @_projectDetail.ModifierName</MCol>
                        <MCol Class="d-flex justify-end translucency-blue-color" Cols=6>
                            @T("ModificationTime"):&nbsp;
                            <DateTimeZone Value="_projectDetail.ModificationTime" />
                        </MCol>
                    </MRow>
                }
            </div>
            <div class="d-flex align-end mt-9" style="width:100%;">
                @if (_projectFormModel.HasValue)
                {
                    <SDeleteButton OnClick="RemoveProjectAsync"></SDeleteButton>
                }
                <MSpacer></MSpacer>
                <SButton Height="56" Class="rounded-pill" Color="primary" Width="140" OnClick="()=>SubmitProjectAsync(formContext)">
                    @(_projectFormModel.HasValue ? T("Save") : T("Submit"))
                </SButton>
            </div>
        </div>
    </MForm>
</SSimpleModal>